<template>
  <div>
   <van-cell is-link title="了解更多" @click="show = true" />
 <van-action-sheet v-model="show"  @select="onSelect" :overlay="false" />
 <van-action-sheet v-model="show" title="精彩推荐" style="background-color: rgb(96, 143, 159);color:#fff;">
  <div class="content">
    <h3>赛区新闻</h3>
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :show-indicators='false'>
      <van-swipe-item v-for="(item,index) in areanews" :key="index"><img :src="item.pic" alt="" style="width:100%;height:193px"><p style="">{{item.title}}</p></van-swipe-item>
  </van-swipe>
    </div>
    <h3>精彩视频</h3>
 <div class="example-3d">
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide v-for="(item,index) in areavideo" :key="index"><img :src="item.pic" alt="" style="width:100%;"><p style="color:black">{{item.title}}</p></swiper-slide>
  </swiper>
</div>
    <h3>冬奥百科</h3>
    <div class="example-3d">
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide><img src="/image/01.jpg" alt="" style="width:100%;"></swiper-slide>
    <swiper-slide><img src="/image/02.jpg" alt="" style="width:100%;"></swiper-slide>
    <swiper-slide><img src="/image/03.jpg" alt="" style="width:100%;"></swiper-slide>
    <swiper-slide><img src="/image/01.jpg" alt="" style="width:100%;"></swiper-slide>
    <swiper-slide><img src="/image/01.jpg" alt="" style="width:100%;"></swiper-slide>
    <swiper-slide><img src="/image/02.jpg" alt="" style="width:100%;"></swiper-slide>
    <swiper-slide><img src="/image/03.jpg" alt="" style="width:100%;"></swiper-slide>
  </swiper>
</div>
    <h3>关于我们</h3>
    <div class="example-3d">
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide><img src="/image/01.jpg" alt="" style="width:100%;"></swiper-slide>
    <swiper-slide><img src="/image/02.jpg" alt="" style="width:100%;"></swiper-slide>
    <swiper-slide><img src="/image/03.jpg" alt="" style="width:100%;"></swiper-slide>
    <swiper-slide><img src="/image/01.jpg" alt="" style="width:100%;"></swiper-slide>
    <swiper-slide><img src="/image/01.jpg" alt="" style="width:100%;"></swiper-slide>
    <swiper-slide><img src="/image/02.jpg" alt="" style="width:100%;"></swiper-slide>
    <swiper-slide><img src="/image/03.jpg" alt="" style="width:100%;"></swiper-slide>
  </swiper>
</div>
  </div>
</van-action-sheet>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    data() {
    return {
      show: false,

      // 赛区新闻内容获取
      areanews:[], //保存当前新闻列表
      // 精彩视频内容获取
      areavideo:null,  //保存当前视频列表

      swiperOption: {
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows : true
          },
      pagination: {
            el: '.swiper-pagination'
          }
        }
      }
    },
  methods: {
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },
    // 赛区新闻
    AreaNews(){
      this.axios.get('/areanew').then(res=>{
        console.log(res);
        this.areanews=res.data.results
      })
    },
    //精彩视频
    AreaVideo(){
      this.axios.get('/areavideo').then(res=>{
        console.log(res);
        this.areavideo=res.data.results
      })
    }

  },
  mounted () {
    this.AreaNews();
    this.AreaVideo();
  },
};
</script>

<style lang="scss" scoped>
.content {
    padding: 16px 16px 160px;
  }
.content h3{
  color: #fff;
}
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
  }
// 3333333333333333333333333333
 .example-3d {
    width: 100%;
    height: 300px;
    padding-top: 10px;
    padding-bottom: 20px;
   }
   .swiper-slide {
    //  display: flex;
     justify-content: center;
      align-items: center;
      width: 100%;
      height: 280px;
      border-radius: 30px;
      text-align: center;
      font-weight: bold;
      background-color: white;
      background-position: center;
      background-size: cover;
      color: white;
    }
    .swiper-slide >img{
      border-radius: 30px 30px 0 0;
    }

</style>